<!--
 * @Author: wangming
 * @Date: 2021-12-15 14:04:03
 * @LastEditors: wangming
 * @LastEditTime: 2022-06-02 11:42:45
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hlTableList/__components__/DragTag.vue
 * @Description: 
-->
<template>
  <div class="ks-row-middle-between mb5 pl5 pr5 table-list-check">
    <el-checkbox
      :value="value"
      @change="$emit('change', status)"
      @input="$emit('input', $event)"
    >
      <span
        class="table-list-text-ellipsis"
        :class="{ deletes: status === 'delete' }"
        :title="item.title + '(' + item.code.replace(/_search$/, '') + ')'"
      >
        <el-tag
          size="mini"
          type="success"
          v-show="status === 'add'"
          effect="dark"
          >new</el-tag
        >
        {{ item.title }}
        <span class="f12 g9 dib mr5" :class="{ deletes: status === 'delete' }">
          ({{ item.code.replace(/_search$/, "") }})
        </span>
      </span>
    </el-checkbox>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ["value", "item", "deleteDifferIds", "addDifferIds"],
  computed: {
    status() {
      if (this.deleteDifferIds.indexOf(this.item.id) > -1) {
        return "delete";
      }
      if (this.addDifferIds.indexOf(this.item.id) > -1) {
        return "add";
      }
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.deletes {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-style: double;
}
.table-list-check {
  .el-checkbox {
    width: calc(100% - 14px);
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .table-list-text-ellipsis {
    display: block;
    text-overflow: ellipsis;
    max-width: calc(100% - 38px);
    overflow: hidden;
    white-space: nowrap;
  }
}
::v-deep .el-checkbox__label {
  width: 100%;
}
</style>
